<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <link rel="shortcut icon" href="/static/1.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Room Login</title>
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <nav>
        <div class="nav-wrapper teal">
            <a href="#" class="brand-logo center">Login</a>
        </div>
    </nav>
    <div class="container">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row">
            <div class="col s4 offset-s4 ">
                <form class="col s12" method="post" action="{{ url_for('login') }}">
                    <div class="row">
                        <div class="input-field col s12">
                            <input value="" id="username" type="text" class="validate" name="username">
                            <label class="active" for="username">Username</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input value="" id="password" type="password" class="validate" name="password">
                            <label class="active" for="password">Password</label>
                        </div>
                    </div>
                    <a href="/register">Register Now</a>
                    <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Login
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!--alerts-->
    {% with alert = get_flashed_messages(category_filter=["register_sucess"]) %}
    {% if alert %}
    <script>
        alert("Register sucess!");
    </script>
    {% endif %}
    {% endwith %}

    {% with alert = get_flashed_messages(category_filter=["del_user_sucess"]) %}
    {% if alert %}
    <script>
        alert("Sucessfully deleted account!");
    </script>
    {% endif %}
    {% endwith %}

    {% with alert = get_flashed_messages(category_filter=["del_admin_sucess"]) %}
    {% if alert %}
    <script>
        alert("Sucessfully deleted admin account!");
    </script>
    {% endif %}
    {% endwith %}

    {% with errors = get_flashed_messages(category_filter=["password_error"]) %}
    {% if errors %}
    <script>
        alert("Wrong password!");
    </script>
    {% endif %}
    {% endwith %}

    <!--button enable-->
    <script>
        let inp = document.querySelector('#username');
        let passinp = document.querySelector('#password');
        let btn = document.querySelector('#submit');
        setInterval(function () {
            if (inp.value && passinp.value) {
                btn.classList.remove('disabled');
            } else {
                if (!btn.classList.contains('disabled')) {
                    btn.classList.add('disabled');
                }
            }
        }, 300);
    </script>
</body>

</html>